/* 销售时间的简单组件封装 - 现销售时间变为了既可选时间范围，又可只选开始时间，为维护主页面代码简洁，对此类业务进行业务组件封装 */
<template>
  <div class="sale-time-wrapper">
    <!-- 切换选项 -->
    <el-select
      style="width: 120px"
      v-model="saleTimeTypeVmodel"
      label="有结束时间"
      border
    >
      <el-option label="有结束时间" :value="true"></el-option>
      <el-option label="无结束时间" :value="false"></el-option>
    </el-select>

    <span style="margin: 0 10px;">-</span>

    <!-- 时间选择器类型 -->
    <div style="flex: 1">
      <!-- 时间范围 -->
      <time-range-picker
        style="width: 100%"
        v-if="saleTimeType === true"
        v-bind="$attrs"
        type="date-time"
        :start.sync="startVmodel"
        :end.sync="endVmodel"
        v-on="$listeners"
        :picker-options="pickerOptions"
      />

      <!-- 日期时间选择器 -->
      <el-date-picker
        v-else
        v-bind="$attrs"
        type="datetime"
        style="width: 100%"
        placeholder="起始时间"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="{
          ...pickerOptions,
          disabledDate: pickerOptions.startDisabledDate
        }"
        v-model="startVmodel"
        v-on="$listeners"
      />
    </div>
  </div>
</template>

<script>

const typeMap = {
  'date-time': 'datetime',
  'date': 'daterange',
  'year-month': 'month',
  'month': 'month',
  'year': 'year'
}

export default {
  props: {
    start: {
      type: String,
      default: undefined
    },
    end: {
      type: String,
      default: undefined
    },
    type: {
      type: String,
      default: 'date-time'
    },
    pickerOptions: {
      type: Object,
      default: undefined
    },
    saleTimeType: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    saleTimeTypeVmodel: {
      get () {
        return this.saleTimeType
      },
      set (val) {
        this.$emit('update:saleTimeType', val)
      }
    },
    startVmodel: {
      get () {
        return this.start
      },
      set (val) {
        this.$emit('update:start', val)
        this.$parent.$emit('el.form.change', val)
        this.$parent.$emit('el.form.blur', val)
      }
    },
    endVmodel: {
      get () {
        return this.end
      },
      set (val) {
        this.$emit('update:end', val)
        this.$parent.$emit('el.form.change', val)
        this.$parent.$emit('el.form.blur', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .sale-time-wrapper {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    :deep(.el-date-editor) {
      width: 100%;
      .el-input__inner {
        padding-right: 20px;
      }
    }
  }
</style>
